<template>
	<div  class="" style="height: 92vh;z-index: 1;position: relative;background-color:#FFFFFF;">

		<el-tabs  v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="附近" name="first">
				附近
			</el-tab-pane>
			<el-tab-pane label="推荐" name="second">推荐</el-tab-pane>
			<el-tab-pane label="关注" name="third">关注</el-tab-pane>
		</el-tabs>
	</div>

</template>

<script>
	import restaurants from '../data/json/restaurants1.json'
	export default {
		name: "Found",
		data(){
			return{
				restaurants,
				activeName: 'first'
			}
		},
		methods: {
			handleClick(tab, event) {
				console.log(tab, event);
			}
		}
	}
</script>

<style scoped>
	#total {
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: center;
	}

	.te {
		background-color: rgb(241, 136, 79);
	}

	.jian {
		background-color: rgb(240, 115, 115);
	}

	.shou {
		background-color: rgb(112, 188, 70);
	}

	.zhe {
		background-color: rgb(60, 199, 145);
	}

	.zeng {
		background-color: rgb(60, 199, 145);
	}
	.pei{
		background-color: rgb(112, 188, 70);
	}

	.food-item {
		width: 92vw;
		/*height: 25vh; */
		display: flex;
		flex-flow: column nowrap;
		border-radius: 8px;
		background-color: #FFFFFF;
		margin: 1vh 2vw;
		padding: 4vw 0;
		border-bottom: .133333vw solid #eee;
		border-top: .133333vw solid #eee;
	}

	.food-item-one {
		display: flex;
		padding: 0 2.666667vw;
	}

	.food-item-one>div {
		flex: 1;
		display: flex;
		flex-flow: column nowrap;
	}

	.food-item-one>img {
		width: 12vh;
		height: 12vh;
		padding-right: 2vw;
	}

	.food-info {
		display: flex;
		flex-flow: column;
		justify-content: space-between;
	}

	.food-info>span:nth-child(1) {
		display: flex;
		margin: 0;
		padding: 0;
		color: #333;
		font-weight: 700;
		font-size: 16px;
		overflow: hidden;
	}

	.food-info>span:nth-child(2) {
		display: flex;
		justify-content: space-between;
		overflow: hidden;
		color: #666;
		list-style: none;
		font-size: 12px;
		line-height: normal;
	}

	.food-info>div {
		display: flex;
		justify-content: space-between;
		font-size: 12px;
		color: #666;
	}

	.food-item-two {
		padding-left: 25vw;
		display: flex;
		flex-flow: column;
		margin-top: 1vh;
	}

	.discount-tol {
		display: flex;
		flex-flow: column;
	}

	.discount {
		display: flex;
		flex-flow: row;
		align-items: flex-start;
		padding-top: 1vh;
	}

	.discount>span:nth-child(1) {
		color: #FFF;
		display: inline;
		font-size: 12px;
		line-height: 12px;
	}

	.discount>span:nth-child(2) {
		color: #666;
		font-size: 12px;
		line-height: 12px;

		display: inline;
		width: 45vw;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>
